<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pacman TLV 999</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/scripts/lib/jqtouch/jqtouch.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/scripts/dsl.common.js"></script>
<script type="text/javascript" src="/scripts/lib/stringbuilder/dsl.stringbuilder.js"></script>
<script type="text/javascript" src="/scripts/lib/jhashtable/jshashtable-2.1.js"></script>


<script type="text/javascript" src="/scripts/tlvivi.pacman.gamemanager.js"></script>
<script type="text/javascript" src="/scripts/tlvivi.pacman.map.js"></script>
<script type="text/javascript" src="/scripts/ui/tlvivi.pacman.ui.makeplayerslist.js"></script>
<script type="text/javascript" src="/scripts/pages/default.html.js"></script>

<link rel="stylesheet" href="/styles/jqtouch.min.css" />
<link rel="stylesheet" href="/styles/theme.min.css" />
<link rel="stylesheet" href="/styles/screen.css" />

</head>
<body>
	<!-- HOME SCREEN -->
	<div id="home" class="current">
        <div class="toolbar">
            <h1>Pacman TLV</h1>
        </div>
        <br />
        <img src="/images/pacmanTlv.jpg" />
        <ul class="rounded">
            <li><a href="#newGameScreen">New Game</a></li>
            <li><span class="listItem" onclick="initGameSelectionScreen()">Join Game</span></li>
            <li><a href="#">About Us</a></li>
        </ul>
    </div>
    
    <!-- NEW GAME SCREEN -->
    <div id="newGameScreen" class="form">
    	<div class="toolbar">
            <h1>Start a New Game</h1>
            <a class="back" href="#">Back</a>
        </div>
        <ul>
        	<li>
        		<span>Name: </span><input type="text" id="txtGameName" name="txtGameName" value="" placeholder="Enter game name" />
        	</li>
        </ul>
        <a href="#" class="whiteButton subButton" onclick="createNewGame()">Create Game</a>
    </div>
    
    <!-- GAME SELECTION SCREEN-->
    <div id="gameSelectionScreen">
    	<div class="toolbar">
            <h1>Join A Game</h1>
        </div>
        <h2>Current Games To Join</h2>
        <ul class="rounded">
        </ul>
    </div>
    
    <!-- JOIN GAME SCREEN -->
    <div id="joinGameScreen" class="form">
    	<div class="toolbar">
            <h1>Join a Game</h1>
            <a class="back" href="#">Back</a>
        </div>
        	<ul class="rounded">
                <li>
                	<span>Name: </span><input type="text" id="txtPlayerName" name="txtPlayerName" value="" placeholder="Enter your name" />
                </li>
            	<li>
            		<span>Role: </span>
            		<select id="ddlPlayerRole">
			    		<option value="1">Pacman</option>
			    		<option value="2">Monster</option>
			    	</select>
            	</li>
            </ul>
            <a style="margin:0 10px;color:rgba(0,0,0,.9)" href="#" class="whiteButton subButton" onclick="joinGame()">Join Game</a>
    </div>
    
    
        <!-- GAME INTRO SCREEN IS SHOWN WHEN YOU JOIN A GAME THAT IS NOT STARTED YET-->
    <div id="gameIntroScreen">
    	<div class="toolbar">
            <h1></h1>
        </div>
        <h2>Players Currently Registered In The Game</h2>
        <ul class="rounded">
        </ul>
        <a style="margin:0 10px;color:rgba(0,0,0,.9)" href="#gameBoard" class="submit whiteButton cube hidden" onclick="startGame()">Start Game</a>
    </div>
    
     <!-- GAME BOARD SCREEN -->
    <div id="gameBoard" style="width:100%; height:100%">
    <div class="toolbar">
            <h1>Game On</h1>
            <a class="button flip" href="#gameOptionsScreen">Options</a>
        </div>
        <div id="mapCanvas" style="width:100%; height:100%"></div>
        <div id="messagesPanel" class="info">
        	<h2 id="messageBody"></h2>
    	</div>
    </div>
    
    
      <!-- SEND MESSAGE SCREEN -->
    <div id="sendMessageScreen" class="form">
    	<div class="toolbar">
            <h1>Send Message</h1>
            <a class="back" href="#">Back</a>
        </div>
        <ul>
        	<li>
        		<textarea id="txtSendMessage" rows="5" cols="30"></textarea>
        	</li>
        </ul>
        <a href='#gameBoard' class="whiteButton swap subButton" onclick="sendMessage()">Send Message</a>
    </div>
    
    <!-- GAME OPTIONS SCREEN -->
    <div id="gameOptionsScreen" class="form">
    	<div class="toolbar">
            <h1>Game Options</h1>
            <a class="back" href="#">Back</a>
        </div>
        <ul>
        	<li><a href="#gameStateScreen" onclick="initGameStateScreen()">View Game State</a></li>
        	<li><a href="#sendMessageScreen">Send Message</a></li>
        	<li>
        		<span class="toggle">
        			<input id="enableSound" type="checkbox" />
        		</span>
        	</li>
        	
        </ul>
    </div>
    
     <!-- GAME STATE SCREEN -->
    <div id="gameStateScreen" class="form">
    	<div class="toolbar">
            <h1>Game Options</h1>
            <a class="back" href="#">Back</a>
        </div>
        <ul>
        </ul>
    </div>
    
	
</body>
</html>